<template>
    <div @keyup="press">
        <char_recommend :char_recommend_id="this.char_recommend_id"></char_recommend>
        <city_recommend :city_recommend_id="this.city_recommend_id"></city_recommend>
        <div class="pointslst">
            <point @click.native="()=>{click_event(i)}" class='points' :name="'_' + i" v-for="i in 900"></point>
        </div>
    </div>
</template>

<script>
    import point from "@/components/point/point.vue"
    import render_mapper from "../../method/MapAdapter.js"
    import websocket from "../../method/webSocket.js"
    import char_recommend from "@/components/recommends/char.vue"
    import city_recommend from "../../components/recommends/city.vue"

    export default {
        name: "gamemap",
        data() {
            return {
                char_recommend_id: 0,
                city_recommend_id: 0,
                color_mapper: {}, // 颜色
                map_json: undefined,
            }
        },
        components: {
            point, char_recommend, city_recommend
        },
        methods: {
            press(e) {
                console.log(e.target.value)
            },
            click_event(id) {
                this.char_recommend_id = id
                let is_aram = render_mapper.is_aram(this.map_json, id);
                let is_city = render_mapper.is_city(this.map_json, id);
                if (is_aram.flag) {
                    // 当前这个点是 角色
                    this.$store.commit('set_open_recommend_char_flag', true)
                    return
                } else if (is_city.flag) {
                    this.$store.commit('set_open_recommend_city_flag', true)
                    return
                }
                this.selected_point(id)
            },
            selected_point(id) {
                let is_special_point = render_mapper.is_special_point(this.map_json, id) // 判断当前选中的格子是否为有单元的格子
                if (is_special_point === false) {
                    if (this.$store.state.from_ === null) {
                        // 如果用户是 第一次 选择一个 没有单元存在 格子
                        this.$notify.warning("可以试试按住Q键打开操作菜单")

                        return
                    } else if (this.$store.state.to === null) {
                        // 如果form_存在且这个单元格是普通单元格 那么这个
                        this.$store.state.to = id

                        // 设置格子选中的样式
                        let ele = document.getElementsByName("_" + id)[0];
                        let ele_m = window.getComputedStyle(ele,);
                        ele.style.borderColor = 'red'
                    } else {
                        console.log("to和from清空")

                        let ele = document.getElementsByName("_" + this.$store.state.to)[0];
                        let ele_m = window.getComputedStyle(ele,);
                        ele.style.borderColor = 'white'

                        ele = document.getElementsByName("_" + this.$store.state.from_)[0];
                        ele_m = window.getComputedStyle(ele,);
                        ele.style.borderColor = 'white'
                        this.$store.state.to = null
                        this.$store.state.from_ = null

                    }
                } else if (is_special_point === true) {
                    // 如果用户选择的是一个 存在单元的格子
                    if (this.$store.state.from_ === null) {
                        this.$store.state.from_ = id;
                        console.log("from设置完毕")
                        let ele = document.getElementsByName("_" + id)[0];
                        let ele_m = window.getComputedStyle(ele,);
                        ele.style.borderColor = '#2A53CD'
                    } else if (this.$store.state.to === null) {
                        this.$store.state.to = id
                        console.log("你的to将会被设置")

                        // 设置格子选中的样式
                        let ele = document.getElementsByName("_" + id)[0];
                        let ele_m = window.getComputedStyle(ele,);
                        ele.style.borderColor = 'red'
                    }
                }
            },

            MapUpdate(data) {
                let web_json = data.data;
                render_mapper.web_json = web_json;
                let json_data = render_mapper.render(render_mapper.web_json); // 对地图进行渲染
                this.map_json = json_data;
            }

        },
        mounted() {

            websocket.mapper_event["MapUpdate"] = this.MapUpdate
            websocket.send("mapdata self")
        }
    }
</script>

<style scoped>
    .pointslst {
        display: flex;
        flex-wrap: wrap;
        overflow-y: scroll;
        height: 100vh;
    }

    .points {
        width: calc(100% / 30) !important;
        height: calc(100vw / 30) !important;
        box-sizing: border-box;
    }


</style>